<script setup>
import Statistic from "@/components/global/statistic.vue";
</script>
<template>
  <div style=" text-align:center">
    <h1>{{ name }}</h1>
    <div>
      <statistic></statistic>
    </div>
    <div id="echartContainer" ref="echartContainer" style="width:100%; height:450px"></div>
  </div>
</template>

<script>
import axios from "axios";

const echarts = require("echarts");
export default {
  data() {
    return {
      name: "chart",
      data: [
      ],
    };
  },
  mounted() {
    // 这里实现的是一个比较简单的，可以按照需求将函数移动到methods函数中
    axios({
      method: 'get',
      url: 'http://localhost:5000/fund/get_fund_detail',
      params: {
        //获取router中的query参数
        code: localStorage.getItem('search_code')
      },
      timeout: 5000
    }).then(res => {
      if (res.data.data.length === 0){
        this.$message.error("您查询的股票或基金不存在！")
        this.$router.push('/home')
      }
      //todo:返回的数据格式有问题
      //required: [date, open, close, lowest, highest, volume, 0, macd, dif, dea]
      //actual: [date, symbol,code,name,open,high,low,close,volume]
      console.log(this.data)
      this.name = res.data.name;
      this.data = res.data.data;
      //把第一列转为日期
      const data0 = splitData(this.data);

      //sleep 1 s
      // setTimeout(() => {
      //   data0 = splitData(this.data);
      // }, 1000)
      // macd计算
      function splitData(rawData) {
        const categoryData = [];
        const values = [];
        const macds = [];
        const difs = [];
        const deas = [];
        for (let i = 0; i < rawData.length; i++) {
          categoryData.push(rawData[i].splice(0, 1)[0]);
          values.push(rawData[i]);
          macds.push(rawData[i][6]);
          difs.push(rawData[i][7]);
          deas.push(rawData[i][8]);
        }
        return {
          categoryData: categoryData,
          values: values,
          macds: macds,
          difs: difs,
          deas: deas
        };
      }

      // ma均线函数
      function calculateMA(dayCount) {
        const result = [];
        for (let i = 0, len = data0.values.length; i < len; i++) {
          if (i < dayCount) {
            result.push("-");
            continue;
          }
          let sum = 0;
          for (let j = 0; j < dayCount; j++) {
            sum += data0.values[i - j][1];
          }
          result.push(sum / dayCount);
        }
        return result;
      }

      // k线配置项
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        grid: [
          {
            left: "3%",
            top: "0",
            height: "75%"
          },
          {
            left: "3%",
            right: "10%",
            top: "80%",
            height: "10%"
          }
        ],
        xAxis: [
          {
            type: "category",
            data: data0.categoryData,
            scale: true,
            boundaryGap: false,
            axisLine: {
              onZero: false,
              lineStyle: {
                color: "red"
              }
            },
            splitLine: {
              show: false
            },
            splitNumber: 20
          },
          {
            type: "category",
            gridIndex: 1,
            data: data0.categoryData,
            axisLabel: {show: false}
          }
        ],
        yAxis: [
          {
            scale: true,
            splitArea: {
              show: true
            },
            axisLine: {
              lineStyle: {
                color: "red"
              }
            },
            position: "right"
          },
          {
            gridIndex: 1,
            splitNumber: 3,
            // axisLine: { onZero: false },
            axisTick: {show: false},
            splitLine: {show: false},
            axisLabel: {show: true},
            axisLine: {
              onZero: false,
              lineStyle: {
                color: "red"
              }
            },
            position: "right"
          }
        ],
        dataZoom: [
          {
            type: "inside",
            start: 100,
            end: 80
          },
          {
            show: true,
            type: "slider",
            y: "90%",
            start: 50,
            end: 100
          },
          {
            show: false,
            xAxisIndex: [0, 1],
            type: "slider",
            start: 20,
            end: 100
          }
        ],
        series: [
          {
            name: "555",
            type: "candlestick",
            data: data0.values,
            markPoint: {
              data: [
                {
                  name: "XX标点"
                }
              ]
            },
            markLine: {
              silent: true,
              data: [
                {
                  yAxis: 2222
                }
              ]
            }
          },
          {
            name: "MA5",
            type: "line",
            data: calculateMA(5),
            smooth: true,
            lineStyle: {
              normal: {
                opacity: 0.5
              }
            }
          },
          {
            name: "MA10",
            type: "line",
            data: calculateMA(10),
            smooth: true,
            lineStyle: {
              normal: {
                opacity: 0.5
              }
            }
          },
          {
            name: "MA20",
            type: "line",
            data: calculateMA(20),
            smooth: true,
            lineStyle: {
              normal: {
                opacity: 0.5
              }
            }
          },
          {
            name: "MA30",
            type: "line",
            data: calculateMA(30),
            smooth: true,
            lineStyle: {
              normal: {
                opacity: 0.5
              }
            }
          },
          {
            name: "MACD",
            type: "bar",
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: data0.macds,
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList;
                  if (params.data >= 0) {
                    colorList = "#ef232a";
                  } else {
                    colorList = "#14b143";
                  }
                  return colorList;
                }
              }
            }
          },
          {
            name: "DIF",
            type: "line",
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: data0.difs
          },
          {
            name: "DEA",
            type: "line",
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: data0.deas
          }
        ]
      };
      // 进行初始化
      const charts = echarts.init(this.$refs.echartContainer);
      charts.setOption(option);
      console.log(this.data)
    }).catch(err => {
      console.log(err)
    })


  }
};
</script>

<style scoped>

h1 {
  translate: 500px -20px;
}

.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}

.percent {
  display: inline-block;
}
</style>
